import React from "react";
import { Component } from "react";
import SecurityWorkRank from "../securityworkrank.jsx";
import StatisticAnalysis from "../statisticanalysis.jsx";
import "../../../css/bigscreen/nbigscreen.css";
import DangerDistribute from "../dangerdistribute.jsx";
import MapStatistic from "../mapstatistic.jsx";
import SchoolSecurity from "../schoolsecurity.jsx";
import { Notice } from "../notice.jsx";
import { formatTime } from "../../../js/bigscreen/time"
import { education } from "../../../js/bigscreen/education";
import { compareSecretAndExpireTimeApi, getScreenSecretApi} from "../../../js/bigscreen/api.js";



class CountyPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            timer: "",
            title: "",
            statistic: { totalpatrolnum: 0, totaldangernum: 0, totalinspectnum: 0 },
            schoolNum: 0,
            gridNum: 0,
            schoolGridNumOfPeople: 0,
            schoolGridOutNumOfPeople: 0,
            secret: this.props.match.params.secret,
            isShow: false,
            isTip: true
        }
    }


    componentDidMount() {

        
        require("../../../js/bigscreen/flexible");
        this.getTime();
        this.getTitle();
        compareSecretAndExpireTimeApi(this.state.secret).then((res) => {
            if (res.data == 'success') {
                this.setState({
                    isShow: true
                })
            }else{
                this.setState({
                    isTip: false
                })
            }
        })
    }

    componentWillUnmount() {
        clearInterval(this.state.timer)
    }

    getTitle = () => {
        if (this.props.match.params.county != undefined) {
            let id = this.props.match.params.county;
            this.setState({
                title: education[id].name
            })
        }
    }

    getTime = () => {
        this.state.timer = setInterval(() => {
            var dateYear = formatTime(new Date(), 'yyyy年MM月dd日');
            var dateDay = formatTime(new Date(), 'HH:mm:ss');
            this.setState({
                timeStr: dateYear + " " + dateDay
            });
        }, 1000);
    }

    shareStatistic(statistic) {
        this.setState({
            statistic: statistic
        })
    }
    shareGridNum(girdNum) {
        this.setState({
            gridNum: girdNum
        })
    }
    shareschoolGridNumOfPeople(schoolGridNumOfPeople) {
        this.setState({
            schoolGridNumOfPeople: schoolGridNumOfPeople
        })
    }
    shareschoolGridOutNumOfPeople(schoolGridOutNumOfPeople) {
        this.setState({
            schoolGridOutNumOfPeople: schoolGridOutNumOfPeople
        })
    }
    shareschoolNum(schoolNum) {
        this.setState({
            schoolNum: schoolNum
        })
    }
    // redirect = () => {
    //     let name = "绍兴中专"
    //     let key = "456789"
    //     getScreenSecretApi(name, key).then((res) => {
    //         let url 
    //         if(parseInt(sessionStorage.getItem("departmentId")) == 1){
    //             url = 'http://localhost:3000/edubigscreen/' + res.data ;
    //         }else{
    //             url = 'http://localhost:3000/edubigscreen/county/' + parseInt(sessionStorage.getItem("departmentId")) + '/' + res.data ;
    //         }
    //         window.location.href = url ;
    //     })
    // }

    render() {
        return (
            <div className="bigscreen_bg">
                <div className="border">
                    {
                        this.state.isShow ?
                            <div className="leftM">
                                <StatisticAnalysis name="昨日统计" type="0"></StatisticAnalysis>
                                <SecurityWorkRank schooltype="高中" name="本月高中安全工作排名" type="0" position="left" position1="mid"></SecurityWorkRank>
                                <SecurityWorkRank schooltype="初中" name="本月初中安全工作排名" type="0" position="left" position1="bottom"></SecurityWorkRank>
                            </div> : null
                    }
                    <div className="middleM">
                        <div className="title">
                            <span>{this.state.title}师生安全网格</span>
                        </div>
                        <div className="time">
                            <span>{this.state.timeStr}</span>
                        </div>
                        {
                            this.state.isShow ?
                                <MapStatistic statistic={this.shareStatistic.bind(this)} gridNum={this.shareGridNum.bind(this)}
                                    schoolGridNumOfPeople={this.shareschoolGridNumOfPeople.bind(this)} schoolNum={this.shareschoolNum.bind(this)}
                                    schoolGridOutNumOfPeople={this.shareschoolGridOutNumOfPeople.bind(this)}></MapStatistic>
                                    : 
                                    <div>
                                        {
                                            this.state.isTip ? null :
                                            <div className="invalidTip">
                                              {/* <div>大屏链接已失效,请<a onClick={this.redirect}>重新进入</a>大屏!</div> */}
                                              <div>大屏链接已失效,请重新进入大屏!</div>
                                           </div>
                                        }
                                    </div>
                        }
                        {
                            this.state.isShow ?
                                <div className="midbottom">
                                    <DangerDistribute></DangerDistribute>
                                    <SchoolSecurity></SchoolSecurity>
                                </div> : null
                        }
                    </div>
                    {
                        this.state.isShow ?
                            <div className="rightM">
                                <Notice statistic={this.state.statistic} gridNum={this.state.gridNum} schoolGridNumOfPeople={this.state.schoolGridNumOfPeople}
                                    schoolNum={this.state.schoolNum} schoolGridOutNumOfPeople={this.state.schoolGridOutNumOfPeople}></Notice>
                                <SecurityWorkRank schooltype="小学" name="本月小学安全工作排名" type="0" position="right" position1="mid"></SecurityWorkRank>
                                <SecurityWorkRank schooltype="幼儿园" name="本月幼儿园安全工作排名" type="0" position="right" position1="bottom"></SecurityWorkRank>
                            </div>:null
                    }
                </div>


            </div>
        )
    }
}

export { CountyPage }
